<template>
  <ul class="item-food-list">
    <li v-for="(cation, index) in specification">
      <div class="split-line"></div>
      <!-- 一级 -->
      <div class="flex" style="margin-bottom: 10px">
        <el-input v-model="cation.type" class='cation-type' placeholder="一级规格" clearable></el-input>
        <div class="flex-c">
          <el-icon @click="clickAdd_leve1(cation, index)">
            <CirclePlusFilled />
          </el-icon>
          <el-icon @click="clickDel_leve1(cation, index)" v-show="specification.length > 1">
            <RemoveFilled />
          </el-icon>
          <el-button type="primary" style="margin-left: 10px;"
            size="small" link @click="parentClickAdd_leve2(cation.items)">添加二级规格</el-button>
        </div>
      </div>

      <!-- 二级 -->
      <div v-for="(item, itemIndex) in cation.items" class="line">
        <el-input clearable v-model="item.name" style="width: 150px" placeholder="二级规格"></el-input>
        <el-form-item label="合作价">
          <el-input-number v-model="item.storePrice" :controls="false"></el-input-number>
        </el-form-item>
        <el-form-item label="销售价">
          <el-input-number v-model="item.salePrice" :controls="false"></el-input-number>
        </el-form-item>
        <el-form-item label="限购">
          <el-input-number v-model="item.limitCount" :controls="false"></el-input-number>
        </el-form-item>
        <div class="flex-c">
          <el-icon @click="clickAdd_leve2(cation, item, itemIndex)">
            <CirclePlusFilled />
          </el-icon>
          <el-icon @click="clickDel_leve2(cation, item, itemIndex)" v-show="cation.items.length > 1">
            <RemoveFilled />
          </el-icon>
        </div>
      </div>

    </li>
  </ul>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  specification: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["clickQuery", 'clickAdd']);
console.log('菜品规格：', props.specification)

/* ---------methods--------- */

// 增加一级规格---复制的id怎么处理？？提交请求的有些id值可有可无？
function clickAdd_leve1(item, index) {
  let cation = JSON.parse(JSON.stringify(item))
  props.specification.splice(index + 1, 0, cation)
}

// 移除一级规格
function clickDel_leve1(item, index) {
  if (props.specification.length > 1) {
    props.specification.splice(index, 1)
  }
}

// 给自己添加二级规格
function parentClickAdd_leve2(itemList) {
  itemList.push({ storePrice: 0, salePrice: 0, "name": "", "limitCount": 0 })
}


// 同级增加二级规格
function clickAdd_leve2(cation, item, index) {
  cation.items.splice(index + 1, 0, { ...item })
}

// 移除二级规格
function clickDel_leve2(cation, item, index) {
  if (cation.items.length > 1) {
    cation.items.splice(index, 1)
  }
}

</script>

<style lang="scss" scoped>
.el-input-number.is-without-controls {
  width: 60px;

  :deep(.el-input__wrapper) {
    padding: 0px;
  }
}

.cation-type {
  :deep(.el-input__wrapper) {
    background-color: #f9bd82;
    .el-input__inner {
      color: #000;
    }
  }
}

.item-food-list {
  border-radius: 8px;
  width: 100%;
  border: 1px solid #d7d4d4;
  padding: 15px;

  li:nth-child(1) {
    .split-line {
      display: none;
    }
  }
  .line {
    display: flex;
    flex-wrap: wrap;

    &>div {
      margin: 5px 0px;
    }
    .el-form-item {
    margin-left: 26px;
  }
  }

  :deep(.el-form-item__label) {
    width: auto !important;
    padding: 0px;
    margin-right: 4px;
  }

  .el-icon {
    font-size: 23px;
    margin-left: 26px;
    color: #409eff;
    cursor: pointer;
  }

  .el-icon+.el-icon {
    margin-left: 10px;
  }

  .el-icon:nth-child(3) {
    color: #64bb49;
  }

  .el-icon:nth-child(2) {
    color: rgb(252, 108, 108);
  }

}
</style>
